<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/product.css">
    <script src="js/axios.min.js"></script>
</head>

<body>
    <!-- header -->
    <div id="big-box">
        <div class="header">
            <div id="data-box">
                <div class="data-left">
                    <a>全部产品</a>
                    <a>专柜查询</a>
                </div>
                <div class="data-center">
                </div>
                <div class="data-right">
                    <ul>
                        <li class="help-center">帮助中心
                            <div class="help">
                                <div class="help-left">
                                    <h3>如何获得我们的帮助?</h3>
                                    <p>
                                        <a href="">常见问题</a>
                                    </p>
                                    <p>
                                        <a href="">使用条款</a>
                                    </p>
                                    <p>
                                        <a href="">隐私声明</a>
                                    </p>
                                    <p>
                                        <a href="">cookies政策</a>
                                    </p>
                                    <p>
                                        <a href="">知识产权和版权</a>
                                    </p>
                                    <p>
                                        <a href=""> 网站地图</a>
                                    </p>
                                </div>
                                <div class="help-right">
                                    <h3>联系我们</h3>
                                    <p>
                                        <a href="">在线客服：周一-周日早上9点-晚上24</a>
                                    </p>
                                    <p>
                                        <a href="">电话客服：周一-周五早上9点-下午18点 致电400-820-6499</a>
                                    </p>
                                    <a href="">
                                        <div class="help-button">在线咨询</div>
                                    </a>
                                </div>

                                0
                            </div>
                        </li>
                        <li>订阅电子杂志</li>
                        <li class="login"><a href="login.html">登录与注册
                    </a> </li>
                        <li class="data-right-buy"><a href="gouwuche.html">购物袋(0)</a></li>

                </div>
                </ul>
            </div>

            <!-- menu-bar -->
            <div class="menu-bar-box ">
                <div class="menu-bar ">
                    <div class="menu-bar-left "><img src="img/logo.03fce175.jpg " alt=" ">
                    </div>
                    <!-- center -->
                    <!-- 导航 -->
                    <div class="menu-bar-center ">
                        <ul class="menu-bar-center-ul">
                            <li class="menu-bar-center-li">明星产品 </li>
                            <li>会员尊享</li>
                            <li>彩妆</li>
                            <li>护肤</li>
                            <li>工具</li>
                            <li>品牌故事</li>
                        </ul>
                    </div>
                    <div class="menu-bar-right"><span>柔雾唇膏</span></div>
                </div>
            </div>

            <!-- menu-bar-bottom-img-box -->
            <div class="menu-bar-bottom-img-box ">
                <div class="menu-bar-bottom-img " style="background: url(img/0701-PC.jpg) center no-repeat; background-size:cover; "></div>
            </div>
        </div>
    </div>
    </div>
    <!--  -->
    <main>
        <div class="desc-box">
            <ul class="desc-title">
                <li class="active">护肤</li>
                <li>眼部</li>
                <li>唇部</li>
                <li>脸部</li>
                <li>工具</li>
            </ul>
            <ol class="desc-content">
                <li class="active">
                    <div class="title"> <a href="">产品()</a><a href="">默认排序</a></div>
                    <div class="hufu">
                        <!-- <img src="img/tab-01.jpg" alt="">
                        <h3>商品</h3>
                        <h4>商品详情</h4>
                        <p>价格</p>
                        <a href="desc.html?pid=${pObj.pid}"><button class="buybtn">立即购买</button></a> -->

                    </div>
                </li>
                <li class="ele">
                    <div class="hufu">
                        <!-- <img src="img/tab-01.jpg" alt="">
                        <h3>商品</h3>
                        <h4>商品详情</h4>
                        <p>价格</p>
                        <a href="desc.html?pid=${pObj.pid}"><button class="buybtn">立即购买</button></a> -->

                    </div>
                </li>
                <li class="mounth">
                    <div class="hufu">
                        <!-- <img src="img/tab-01.jpg" alt="">
                        <h3>商品</h3>
                        <h4>商品详情</h4>
                        <p>价格</p>
                        <a href="desc.html?pid=${pObj.pid}"><button class="buybtn">立即购买</button></a> -->

                    </div>
                </li>
                <li class="face">
                    <div class="hufu">
                        <!-- <img src="img/tab-01.jpg" alt="">
                    <h3>商品</h3>
                    <h4>商品详情</h4>
                    <p>价格</p>
                    <a href="desc.html?pid=${pObj.pid}"><button class="buybtn">立即购买</button></a> -->
                    </div>
                </li>
                <li class="tool">
                    <div class="hufu">
                        <!-- <img src="img/tab-01.jpg" alt="">
                    <h3>商品</h3>
                    <h4>商品详情</h4>
                    <p>价格</p>
                    <a href="desc.html?pid=${pObj.pid}"><button class="buybtn">立即购买</button></a> -->
                    </div>
                </li>
            </ol>
        </div>
    </main>
    <!-- footer -->
    <div class="footer ">
        <!-- 官方正品保证 -->
        <div class="footer-row ">
            <div class="footer-row1 ">
                <img src="img/footer-row1.png " alt=" ">
                <p>100%官方正品保证</p>
            </div>
            <div class="footer-row1 ">
                <img src="img/footer-row2.png " alt=" ">
                <p>支持多种支付方式</p>
            </div>
            <div class="footer-row1 ">
                <img src="img/footer-row3.png " alt=" ">
                <p>专享官网特惠礼遇</p>
            </div>
            <div class="footer-row1 ">
                <img src="img/footer-row4.png " alt=" ">
                <p>联系我们</p>
                <p>电话400-820-6499</p>
            </div>
        </div>
    </div>
    <div class="copyright ">
        <div class="copyright-top ">
            <div class="copyright-top-content ">
                <h3>
                    <a href=" ">护肤</a>
                </h3>
                <p>
                    <a href=" ">洁颜油</a>
                </p>
                <p>
                    <a href=" ">面部喷雾</a>
                </p>
            </div>
            <!-- 2 -->
            <div class="copyright-top-content ">
                <h3>
                    <a href=" ">眼部</a>
                </h3>
                <p>
                    <a href=" "> 眉妆</a>
                </p>
                <p>
                    <a href=" ">眼影</a>
                </p>
                <p>
                    <a href=" "> 眼线</a>
                </p>
            </div>
            <!-- 3 -->
            <div class="copyright-top-content ">
                <h3>
                    <a href=" ">唇部</a>
                </h3>
                <p>
                    <a href=" "> 唇膏</a>
                </p>
                <p>
                    <a href=" "> 唇釉</a>
                </p>
            </div>
            <!-- 4 -->
            <div class="copyright-top-content ">
                <h3>
                    <a href=" ">脸部
                   </a>
                </h3>
                <p>
                    <a href=" "> 粉底系列</a>
                </p>
                <p>
                    <a href=" ">遮瑕系列</a>
                </p>
                <p>
                    <a href=" ">隔离系列</a>
                </p>

            </div>
            <!-- 5 -->

            <div class="copyright-top-content ">
                <h3>
                    <a href=" ">工具</a>
                </h3>
                <p>
                    <a href=" ">粉底刷</a>
                </p>
                <p>
                    <a href=" ">刷具套组</a>
                </p>
                <p>
                    <a href=" ">睫毛夹</a>
                </p>
            </div>
            <!-- 6 -->
            <div class="copyright-top-content ">
                <h3>
                    <a href=" ">护肤</a>
                </h3>
                <p>
                    <a href=" ">洁颜油</a>
                </p>
                <p>
                    <a href=" ">面部喷雾</a>
                </p>
            </div>

        </div>
        <div class="copyright-bottom ">
            <p>关注我们 国家药监局提示您：宣称用于祛斑美白、防晒、染发、烫发等的化妆品为特殊用途化妆品，产品标签上应标注“国妆特字”或者“国妆特进字”的标准文号。
            </p>
            <p>使用条款 | Cookies政策 | 隐私政策</p>
            <p>使用条款 | Cookies政策 | 隐私政策 中国工商沪ICP备08100043-7号沪公网安备 31010602001532号©L'Oreal China 欧莱雅（中国）有限公司版权所有</p>
        </div>
    </div>
    <!--  -->
    <!-- <script src="js/tab-desc.js"></script> -->
    <script>
        let li = document.querySelectorAll(".desc-title li")
        let ol = document.querySelectorAll(".desc-content li")
        console.log(li, ol);
        let pagenum = 0;
        li.forEach((btn, i) => { //循环遍历的到所有的li
            btn.onclick = function() {
                li[pagenum].style.backgroundColor = 'white'
                li[i].style.backgroundColor = 'pink'

                ol[pagenum].style.display = 'none';
                ol[i].style.display = 'block'
                pagenum = i;
            }
        })
    </script>
    <script>
        shangpin01();

        function shangpin01() {
            let pagesize = 6;
            let pagenum = 3;
            let uid = localStorage.getItem("uid");
            let params = {
                pagesize,
                pagenum,
                uid
            }
            axios.get('http://jx.xuzhixiang.top/ap/api/allproductlist.php', {
                params
            }).then((res) => {
                let
                    data = res.data.data
                console.log(data);
                let resArr = data.map((pobj) => `
                <div class="hufu">
                <img src="${pobj.pimg}" alt="">
                <h3>${pobj.pname}</h3>
                <h4>${pobj.pdesc}</h4>
                <p>${pobj.pprice}</p>
                <a href="desc.html?pid=${pobj.pid}"> <button class="buybtn">立即购买</button></a>
    </div>
`)
                    // console.log(resArr);
                let shangpin = document.querySelector(".ele")
                console.log(shangpin);
                // console.log(resArr);
                shangpin.innerHTML = resArr.join(" ")
                    // shangpin.innerHTML = resArr.join("");
            })

        }
        shangpin03();

        function shangpin03() {
            let pagesize = 6;
            let pagenum = 4;
            let uid = localStorage.getItem("uid");
            let params = {
                pagesize,
                pagenum,
                uid
            }
            axios.get('http://jx.xuzhixiang.top/ap/api/allproductlist.php', {
                params
            }).then((res) => {
                let
                    data = res.data.data
                console.log(data);
                let resArr = data.map((pobj) => `
<div class="hufu">
<img src="${pobj.pimg}" alt="">
<h3>${pobj.pname}</h3>
<h4>${pobj.pdesc}</h4>
<p>${pobj.pprice}</p>
<a href="desc.html?pid=${pobj.pid}"> <button class="buybtn">立即购买</button></a>
</div>
`)
                    // console.log(resArr);
                let shangpin = document.querySelector(".desc-content li")
                console.log(shangpin);
                // console.log(resArr);
                shangpin.innerHTML = resArr.join(" ")
                    // shangpin.innerHTML = resArr.join("");
            })

        }

        shangpin02();

        function shangpin02() {
            let pagesize = 6;
            let pagenum = 1;
            let uid = localStorage.getItem("uid");
            let params = {
                pagesize,
                pagenum,
                uid
            }
            axios.get('http://jx.xuzhixiang.top/ap/api/allproductlist.php', {
                params
            }).then((res) => {
                let
                    data = res.data.data
                console.log(data);
                let resArr = data.map((pobj) => `
<div class="hufu">
<img src="${pobj.pimg}" alt="">
<h3>${pobj.pname}</h3>
<h4>${pobj.pdesc}</h4>
<p>${pobj.pprice}</p>
<a href="desc.html?pid=${pobj.pid}"> <button class="buybtn">立即购买</button></a>
</div>
`)
                    // console.log(resArr);
                let shangpin = document.querySelector(".mounth")
                console.log(shangpin);
                // console.log(resArr);
                shangpin.innerHTML = resArr.join(" ")
                    // shangpin.innerHTML = resArr.join("");
            })

        }

        shangpin04();

        function shangpin04() {
            let pagesize = 6;
            let pagenum = 2;
            let uid = localStorage.getItem("uid");
            let params = {
                pagesize,
                pagenum,
                uid
            }
            axios.get('http://jx.xuzhixiang.top/ap/api/allproductlist.php', {
                params
            }).then((res) => {
                let
                    data = res.data.data
                console.log(data);
                let resArr = data.map((pobj) => `
<div class="hufu">
<img src="${pobj.pimg}" alt="">
<h3>${pobj.pname}</h3>
<h4>${pobj.pdesc}</h4>
<p>${pobj.pprice}</p>
<a href="desc.html?pid=${pobj.pid}"> <button class="buybtn">立即购买</button></a>
</div>
`)
                    // console.log(resArr);
                let shangpin = document.querySelector(".face")
                console.log(shangpin);
                // console.log(resArr);
                shangpin.innerHTML = resArr.join(" ")
                    // shangpin.innerHTML = resArr.join("");
            })

        }
        shangpin05();

        function shangpin05() {
            let pagesize = 6;
            let pagenum = 0;
            let uid = localStorage.getItem("uid");
            let params = {
                pagesize,
                pagenum,
                uid
            }
            axios.get('http://jx.xuzhixiang.top/ap/api/allproductlist.php', {
                params
            }).then((res) => {
                let
                    data = res.data.data
                console.log(data);
                let resArr = data.map((pobj) => `
<div class="hufu">
<img src="${pobj.pimg}" alt="">
<h3>${pobj.pname}</h3>
<h4>${pobj.pdesc}</h4>
<p>${pobj.pprice}</p>
<a href="desc.html?pid=${pobj.pid}"> <button class="buybtn">立即购买</button></a>

</div>
`)
                    // console.log(resArr);
                let shangpin = document.querySelector(".tool")
                console.log(shangpin);
                // console.log(resArr);
                shangpin.innerHTML = resArr.join(" ")
                    // shangpin.innerHTML = resArr.join("");
            })

        }
    </script>
</body>

</html>